<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <title>EasyBlog - 修改密码</title>
    <link rel="stylesheet" href="../static/css/login.css" th:href="@{/static/css/login.css}">
    <link rel="stylesheet" href="../static/css/jigsaw.css" th:href="@{/static/css/jigsaw.css}">
    <!--加载动画和确认框特效-->
    <link rel="stylesheet" href="../static/css/loading/zeroModal.css" th:href="@{/static/css/loading/zeroModal.css}">
    <style type="text/css">
        input::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-2" type="radio" name="tab" class="sign-up" checked><label for="tab-2" class="tab">修改密码</label>
            <div class="login-form">
                <form>
                    <div class="sign-up-htm">
                        <div class="group" style="position: relative;">
                            <label class="label">手机号/邮箱</label>
                            <input id="account" list="mails" name="account" type="text" class="input"
                                   placeholder="填写注册的手机号或者邮箱">
                            <span id="account-validate-correct" class="correct" style=":before;position: absolute;right:2px;top:18px;display: none"></span>
                            <span id="account-validate-incorrect" class="incorrect" style=":before;position: absolute;right:2px;top:18px;display: none"></span>
                            <span id="account-msg" style="display: none;font-size: 12px;margin-top: 5px"></span>
                            <datalist id="mails"></datalist>
                        </div>
                        <div class="group" style="position: relative;">
                            <label class="label">验证码</label>
                            <input id="captcha" type="text" name="code" style="max-width: 60%;display: inline-block" class="input" placeholder="请输入验证码">
                            <button id="code-btn"  type="button" style="cursor: pointer;max-width: 35%;display: inline-block;padding:15px 0"
                                    class="button m-font-size"><span id="nums">获取验证码</span>
                            </button>
                            <span id="captcha-msg" style="display: none;font-size: 12px;margin-top: 5px"></span>
                        </div>
                        <div class="group" style="position: relative;">
                            <label class="label">新密码</label>
                            <input id="pass" name="account" type="password" class="input" placeholder="填写新密码">
                            <span id="password-display-toggle" class="password-hide" style=":before;position: absolute;right:2px;top:18px;cursor: pointer;"></span>
                            <span id="password-msg" style="display: none;font-size: 12px;margin-top: 5px"></span>
                        </div>
                        <br/>
                        <div class="group">
                            <input id="sub-btn" style="cursor: pointer;" type="button" class="button" value="立即修改">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="../static/js/jigsaw.js" th:href="@{/static/js/jigsaw.js}"></script>
<script src="../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script src="../static/js/loading/mustache.js" th:src="@{/static/js/loading/mustache.js}"></script>
<script src="../static/js/loading/zeroModal.js" th:src="@{/static/js/loading/zeroModal.js}"></script>
<!--用户输入信息验证-->
<script type="text/javascript">
    const obj = window.document.location;
    const BASE_PATH = obj.href.substring(0, obj.href.indexOf(obj.pathname));

    $(document).ready(function () {
        showPageZoomWarning();
        checkAccountExist();
        checkPasswordCorrect();
        passwordDisplayToggle($('#password-display-toggle'),$('#pass'));
        //自动补全邮箱
        inputList($('#account'), $('#mails'));
        //发送验证码
        sendAuthCode();
        //提交修改
        submitChange();
    });

    function checkAccountExist() {
        $('#account').blur(function () {
            let account = $('#account').val();
            let mail_reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
            let phone_reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
            if (mail_reg.test(account)) {
                $.ajax({
                    url: BASE_PATH + "/user/checkEmailExist",
                    type: "GET",
                    async: true,
                    data: {email: account},
                    contentType: "application/json",
                    dataType: "json",
                    success: function (ajaxResult) {
                        if (ajaxResult.success) {
                            if (account === "" || account === undefined || account == null) {
                                $('#account-msg').show().css("color", "#d0393f").text("请输入邮箱");
                            } else {
                                $('#account-validate-incorrect').hide();
                                $('#account-validate-correct').show();
                                $('#account-msg').text("");
                            }
                        } else {
                            if (account === "" || account === undefined || account == null) {
                                $('#account-validate-incorrect').show();
                                $('#account-validate-correct').hide();
                                $('#account-msg').show().css("color", "#d0393f").text("请输入邮箱");
                            } else {
                                $('#account-msg').show().css("color", "#d0393f").text("您输入的账号不存在！");
                                $('#account-validate-incorrect').show();
                                $('#account-validate-correct').hide();
                            }
                        }

                    },
                    error: function () {
                        showErrorMessage("服务异常，请重试！");
                    }
                })
            } else if (phone_reg.test(account)) {
                $.ajax({
                    url: BASE_PATH + "/user/checkPhone",
                    type: "GET",
                    async: true,
                    data: {phone: str},
                    contentType: "application/json",
                    dataType: "json",
                    success: function (ajaxResult) {
                        if (ajaxResult.success) {
                            if (account === "" || account === undefined || account == null) {
                                $('#account-validate-incorrect').show();
                                $('#account-validate-correct').hide();
                                $('#account-msg').show().css("color", "#d0393f").text("请输入手机号");
                            } else {
                                $('#account-validate-incorrect').hide();
                                $('#account-validate-correct').show();
                                $('#account-msg').text("");
                            }
                        } else {
                            if (account === "" || account === undefined || account == null) {
                                $('#account-msg').show().css("color", "#d0393f").text("请输入手机号");
                                $('#account-validate-incorrect').show();
                                $('#account-validate-correct').hide();
                            } else {
                                $('#account-msg').show().css("color", "#d0393f").text("您输入的账号不存在！");
                                $('#account-validate-incorrect').show();
                                $('#account-validate-correct').hide();
                            }
                        }

                    },
                    error: function () {
                        showErrorMessage("服务异常，请重试！");
                    }
                })
            } else {
                $('#account-msg').show().css("color", "#d0393f").text("您输入的账号不存在！");
                $('#account-validate-incorrect').show();
                $('#account-validate-correct').hide();
            }
        });
    }

    /**
     * 检查输入的密码是否符合规定
     */
    function checkPasswordCorrect() {
        $('#pass').blur(function () {
            let password = $('#pass').val();
            $.ajax({
                url: BASE_PATH+"/user/checkPassword",
                type: "GET",
                async: true,
                data: {password: password},
                contentType: "application/json",
                dataType: "json",
                success: function (ajaxResult) {
                    if (ajaxResult.success) {
                        if (password === "" || password === undefined || password == null) {
                            $('#password-msg').show().css("color", "#d0393f").text("请输入密码");
                        } else {
                            $('#password-msg').text("");
                        }
                    } else {
                        if (password === "" || password === undefined || password == null) {
                            $('#password-msg').show().css("color", "#d0393f").text("请输入密码");
                        } else {
                            $('#password-msg').show().css("color", "#d0393f").text("密码长度必须介于11-20个字符");
                        }
                    }
                },
                error: function () {
                    showErrorMessage("服务异常，请重试！");
                }
            })
        });
    }

</script>
<!--发送验证码-->
<script type="text/javascript">
    let timeOut;
    let maxtime=60;
    function sendAuthCode() {
        $('#code-btn').click(function () {
            let account = $('#account').val();
            if (account != "") {
                let mail_reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                let phone_reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
                if (phone_reg.test(account)) {
                    //判断是手机，就通过ajax异步请求给用户的这个手机发送验证码
                    $.ajax({
                        url: "/user/captcha-code2phone",
                        type: "GET",
                        async: true,
                        data: {phone: account, option: "modify-pwd"},
                        dataType: "text",
                        success: function () {
                            timeOut=setInterval('countDown()',1000);
                            showSuccessMessage("验证码已经发送到您的手机，请注意查收!");
                        },
                        error: function () {
                            showErrorMessage("服务异常，请重试！");
                        }
                    })
                } else if (mail_reg.test(account)) {
                    //判断是邮箱，就通过ajax异步请求给用户的这个邮箱发送验证码
                    $.ajax({
                        url: "/user/captcha-code2mail",
                        type: "GET",
                        async: true,
                        data: {email: account, option: "modify-pwd"},
                        dataType: "text",
                        success: function () {
                            timeOut=setInterval('countDown()',1000);
                            showSuccessMessage("验证码已经发送到您的邮箱，请注意查收!");
                        },
                        error: function () {
                            showErrorMessage("服务异常，请重试！");
                        }
                    })
                }
            }else{
                showErrorMessage("请输入正确的手机号或者邮箱地址");
            }
        });
    }

    /**
     * 倒计时并禁用按钮
     */
    function countDown() {
        if (maxtime >= 0) {
            $("#code-btn").attr("disabled", "disabled");
            $("#code-btn").text("重新发送(" + maxtime + ")");
            --maxtime;
        } else {
            clearInterval(timeOut);
            $("#code-btn").text("获取验证码");
            $("#code-btn").removeAttr("disabled");
            maxtime = 60;
        }
    }
</script>

<!--修改提交按钮-->
<script type="text/javascript">
    function submitChange() {
        $('#sub-btn').click(function () {
            let password = $('#pass').val();
            let account = $('#account').val();
            let code = $('#captcha').val();
            if(account==""){
                showErrorMessage("请填写您的账号！");
            }else if(code==""){
                showErrorMessage("请填写验证码！");
            }else if(password==""){
                showErrorMessage("请填写新密码！");
            }else {
                _loading(2);
                $.ajax({
                    url: "/user/modifyPwd",
                    method: "GET",
                    async: true,
                    data: {newPassword: password, account: account, code: code},
                    dataType: "json",
                    success: function (ajaxResult) {
                        _loadingClose();
                        showInfoMessage(ajaxResult.message);
                        if(ajaxResult.success) {
                            setTimeout(function () {
                                //重定向到登录页面
                                window.location.href = "/user/loginPage";
                            },1000);
                        }
                    },
                    error: function (ajaxResult) {
                        _loadingClose();
                        showErrorMessage(ajaxResult.message)
                    }
                })
            }
        });
    }
</script>
</html>